<template>
  <div>
    <el-button type="primary" size="small" v-if="!this.brand.name" @click="brandApply">
      申请品牌
    </el-button>
    <el-form ref="applyForm" v-if="isApply" :rules="rules" class="applyForm" :model="applyBrand">
        <el-form-item label="请输入品牌名称" prop="name">
          <el-input  v-model="applyBrand.name" type="text" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="请输入品牌描述">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入品牌信息"
            v-model="applyBrand.info"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="apply">确认申请</el-button>
        </el-form-item>
    </el-form>
    <el-card class="brandCard" v-if="this.brand.name">
      <div slot="header">
        品牌名称：
        <span v-show="!isEdit">{{this.brand.name}}</span>
        <el-input v-show="isEdit" style="width: 250px" v-model="brand.name">{{this.brand.name}}</el-input>
      </div>
      <div>
        品牌信息：
        <span v-show="!isEdit">{{this.brand.info}}</span>
        <el-input v-show="isEdit" type='textarea' style="width: 250px" v-model="brand.info">{{this.brand.info}}</el-input>
      </div>
      <el-button v-show="!isEdit" style="margin-top: 20px" type="primary" @click="brandChange">修改品牌</el-button>
      <el-button v-show="isEdit"  style="margin-top: 20px" type="primary" @click="checkChange">确认修改</el-button>
    </el-card>
  </div>

</template>

<script>
export default {
  name: "brandShow",
  data(){
    return {
      //user: JSON.parse(window.sessionStorage.getItem("user")
      brand:{
        name:"123",
        info:"456"
      },
      isApply:false,
      isEdit:false,
      applyBrand:{
        name:'',
        info:''
      },
      rules:{
        name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }]
      }
    }
  },
  /*
  mounted(){
    this.initBrand;
  }
  * */
  methods:{
    initBrand(){
      this.getRequest('/获取所有品牌信息',user.id).then(res=>{
        if(res)
        {
          //this.brand = res
        }
      })
    },
    brandApply(){
      this.isApply = true;
    },
    apply(){
      this.$refs.applyForm.validate((valid) => {
        if (valid) {
          alert('申请成功');
          //发送申请品牌信息
          let data = {
            userid:'',
            brandname: 'applyBrand.name',
            brandinfo: 'applyBrand.info',
          }
          /*this.postRequest('/创建品牌',data).then(res=>{
            if(res)
            {
              //this.brand = res
            }
          })*/
          this.brand.name=this.applyBrand.name;
          this.brand.info=this.applyBrand.info;
          this.isApply=false;
          this.$message({
            type: 'success',
            message: '申请成功!'
          });
        } else {
          return false;
        }
      });
    },
    brandChange(){
      this.isEdit=true;
    },
    checkChange(){
      let data = {
        userid:'',
        brandname: 'applyBrand.name',
        brandinfo: 'applyBrand.info',
      }
      /*this.postRequest('/创建品牌',data).then(res=>{
        if(res)
        {
          //this.brand = res
        }
      })*/
      this.$message({
        type: 'success',
        message: '修改成功!'
      });
      this.isEdit=false;
    }
  }
}
</script>

<style>
.applyForm{
  width: 450px;
  padding: 10px;
}
.brandCard{
  width: 450px;
}
</style>
